<template>
  <div class="app-container">
    <el-form ref="postForm" :model="form" :rules="rules" class="form-container" style="max-width:600px;"
      v-loading="listLoading">
      <div class="createPost-main-container">
        <el-form-item label-width="120px" label="收货人姓名:" prop="name">
          <el-input v-model.trim="form.name" />
        </el-form-item>
        <el-form-item label-width="120px" label="收货人电话:" :maxlength="11" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label-width="120px" label="地址:" prop="comment">
          <el-select v-model="form.country" placeholder="省" @change="getAreaList(form.country, 'cityOptions')"
            style="margin-right: 10px;width: 150px;">
            <el-option v-for="item in countryOptions" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="form.city" :disabled="!form.country" @change="getAreaList(form.city, 'areaOptions')"
            placeholder=" 市" style="margin-right: 10px;width: 150px;">
            <el-option v-for="item in cityOptions" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="form.area" :disabled="!form.city" placeholder="区" style="width: 160px;">
            <el-option v-for="item in areaOptions" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
          <div style="margin-top: 10px;">
            <el-input v-model.trim="form.comment" placeholder="请输入详细地址" />
            <p style="color:#999;">此地址用于用户续拍后，企业店铺将商品寄给平台，由平台暂为寄存。</p>
          </div>
        </el-form-item>
      </div>
      <div style="text-align: center;margin-top: 30px;margin-bottom: 30px;">
        <el-button waves type="primary" :loading="submitLoading" @click="updateData()">
          保存
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    getSetting,
    getArea,
    updateSetting
  } from '@/api/common'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'settingCarousel',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    data() {
      const validateMobile = (rule, value, callback) => {
        var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        if (!value || value.length < 1 || value.trim().length == 0) {
          callback(new Error('请输入手机号'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      return {
        form: {
          country: "省",
          city: "市",
          area: "区"
        },
        listLoading: true,
        submitLoading: false,
        countryOptions: undefined,
        cityOptions: undefined,
        areaOptions: undefined,
        rules: {
          name: [{
            required: true,
            message: '请输入收货人姓名',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }],
          comment: [{
            required: true,
            message: '请填写地址',
            trigger: 'change'
          }]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        getSetting().then(response => {
          this.form = response.data;
          this.form["country"] = this.form.country[0].id
          this.form["city"] = this.form.city[0].id
          this.form["area"] = this.form.area[0].id
          this.getAreaList(0, "countryOptions");
          this.getAreaList(this.form["country"], "cityOptions");
          this.getAreaList(this.form["city"], "areaOptions");
        }).finally(() => {
          this.listLoading = false
        })
      },
      getAreaList(pid, key) {
        getArea({
          pid
        }).then((res) => {
          this[key] = res.data;
        })
      },
      updateData() {
        this.$refs.postForm.validate(async (valid) => {
          if (valid) {
            this.submitLoading = true
            let params = {
              country: this.form.country.toString(),
              city: this.form.city.toString(),
              area: this.form.area.toString(),
              name: this.form.name,
              phone: this.form.phone.toString(),
              comment: this.form.comment
            }
            updateSetting(this.form.id, params).then(() => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000
              })
            }).finally(() => {
              this.submitLoading = false
            })
          }
        })
      }
    }
  }
</script>

<style>
  .distpicker-address-wrapper select {
    width: 151px;
    margin-right: 10px;
    cursor: pointer;
  }

  .distpicker-address-wrapper select:focus {
    border-color: #409eff !important;
  }
</style>
